{% set page_name = "我的徽章" %}
{% extends "badge_base.html" %}
{% block badge_content %}
<div class="row">
    <div class="medium-12 columns">
        <div class="section">
            <div class="section__header">
                <h1 class="section__title">{{ _('我的徽章') }}</h1>
            </div>
            {% if not ddocs.length %}
            {{ nothing.render("对不起，你没有徽章。") }}
            {% else %}
            <div class="section__body">
                <blockquote class="note typo">
                    <ul>
                      <li>鼠标悬停至徽章可查看徽章标题，单击徽章可打开徽章介绍页。</li>
                      <li>对徽章存续等有任何问题的，请联系站点管理员。</li>
                    </ul>
                </blockquote>
                <div class="row">
                    <div class="medium-9 columns">
                        <h3>当前徽章：
                            {% if current_badge %}
                                {{user.render_inline(handler.user,badge=false)}}
                                {% set _badge = current_badge.split('#') %}
                                <a href="{{ url('badge_detail', id=handler.user.badgeId) }}" class="user-profile-badge v-center" style="background-color:#{{ _badge[1] }}{% if _badge[2] %};color:#{{ _badge[2] }}{% endif %}" {%if _badge[3] %} data-tooltip="{{ _badge[3] }}" {% endif %} >{{ _badge[0] }}</a>
                            {% else %}
                                您暂未启用任何徽章
                            {% endif %}
                        </h3>
                    </div>
                    <div class="medium-3 columns" style="display: flex;">
                    重置徽章：
                        <form method="post">
                            <button class="typo-a" name="operation" value="reset" type="submit">{{ _('Reset') }}</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="section__body no-padding">
                <div class="section__table-container">
                    <table class="data-table section__table-heade">
                    <colgroup>
                        <col class="col--id">
                        <col class="col--title">
                        <col class="col--preview">
                        <col class="col--getat">
                        <col class="col--actions">
                    </colgroup>
                    <thead>
                        <tr>
                        <th class="col--id">{{ _('徽章ID') }}</th>
                        <th class="col--title">{{ _('徽章标题') }}</th>
                        <th class="col--preview">{{ _('徽章预览') }}</th>
                        <th class="col--getat">{{ _('获取时间') }}</th>
                        <th class="col--actions">{{ _('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {%- for ddoc in ddocs -%}
                        <tr>
                        <td class="col--id">{{ ddoc.badgeId }}</td>
                        <td class="col--title">{{ ddoc.badge.title }}</td>
                        <td class="col--preview">
                            <a href="{{ url('badge_detail', id=ddoc.badgeId) }}" class="user-profile-badge v-center" style="background-color:{{ ddoc.badge.backgroundColor }};color:{{ ddoc.badge.fontColor }};" data-tooltip="{{ ddoc.badge.title }}">{{ ddoc.badge.short }}</a>
                        </td>
                        <td class="col--getat">{{ datetimeSpan(ddoc.getAt, false, 'YYYY-M-D')|safe}}</td>
                        <td class="col--actions">
                            <form method="post">
                                <input type="hidden" name="badgeId" value="{{ ddoc.badgeId }}">
                                <button class="typo-a" name="operation" value="enable" type="submit">{{ _('启用') }}</button>
                            </form>
                        </td>
                        </tr>
                        {%- endfor -%}
                    </tbody>
                    </table>
                    {{ paginator.render(page, dpcount) }}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock%}
